<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>

    <avue-crud :data="data" :option="option" :page.sync="page" @on-load="onLoad"></avue-crud>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
    data(){
      return{
          data: [
              {
                  name:'张三',
                  sex:'男',
                  date:'1994-02-23 00:00:00'
              }, {
                  name:'李四',
                  sex:'女',
                  date:'1994-02-23 00:00:00'
              }, {
                  name:'王五',
                  sex:'女',
                  date:'1994-02-23 00:00:00'
              }, {
                  name:'赵六',
                  sex:'男',
                  date:'1994-02-23 00:00:00'
              }
          ],
          option:{
              title:'表格的标题',
              page:false,
              align:'center',
              menuAlign:'center',
              column:[
                  {
                      label:'姓名',
                      prop:'name'
                  },
                  {
                      label:'性别',
                      prop:'sex'
                  },{
                      label: "日期",
                      prop: "date",
                      type: "date",
                      format: "yyyy-MM-dd hh:mm:ss",
                      valueFormat: "yyyy-MM-dd hh:mm:ss",
                  }
              ]
          }
      }
    },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
